<template>
	<BackBar :title="'搜索'"></BackBar>
	<FixedFun></FixedFun>
	<view class="box-search">
		<view class="box-find-bar">
			<customer-search
				:maxSearchListLength="maxSearchListLength"
				:recommendTabValueName="recommendTabValueName"
				:recommendTabShowName="recommendTabShowName"
				:recommendList="recommendList"
				:find_end_text="find_end_text"
				:findValue="findValue"
				@search="handleSearch"
				@cancel="handleCancel"
				@recommend="handleRecommend"
			></customer-search>
		</view>

		<view class="box-find-content">
			<scroll-view scroll-y="true">
				<view class="box-grid">
					<view class="image" @click="fullScreenPreviewImage(item.id, index)" v-for="(item, index) in arr_find_data.value.slice(0, limit)" :key="item.id">
						<ImageLoading :src="item.url"></ImageLoading>
					</view>
				</view>
			</scroll-view>

			<Barload v-if="is_show_load" :status="barload_status" />
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { search_by_tag_id_name } from '../../api'
import { onReachBottom, onPageScroll } from '@dcloudio/uni-app'
/**
maxSearchListLength	Number	10	历史搜索最大存储数量
recommendList	Array	[]	搜索推荐列表
recommendTabShowName	String	'label'	搜索推荐展示字段名
recommendTabValueName	String	'value'	搜索推荐展示值字段名
 */

const recommendList = reactive([
	{
		value: 1,
		label: '鞠婧祎'
	},
	{
		value: 2,
		label: '明星'
	},
	{
		value: 3,
		label: '女生专属'
	},
	{
		value: 4,
		label: '文字'
	},
	{
		value: 5,
		label: '帅哥'
	},
	{
		value: 6,
		label: '风景'
	},
	{
		value: 7,
		label: '女生'
	},
	{
		value: 8,
		label: '动漫'
	}
])

const maxSearchListLength = ref(10)
const recommendTabShowName = ref('label')
const recommendTabValueName = ref('value')
const findValue = ref('')
const find_end_text = ref('')
const arr_find_data = reactive({ value: [] })
const limit = ref(6)
const barload_status = ref('loading')
const is_show_load = ref(false)

onReachBottom(() => {
	if (barload_status.value == 'no-more') return

	limit.value += 4
	setTimeout(() => {
		limit.value += 2
	}, 360)

	if (limit.value >= arr_find_data.value.length) barload_status.value = 'no-more'
})

onPageScroll(() => {})

// 搜索
const handleSearch = function (searchValue, searchItem) {
	arr_find_data.value = []
	limit.value = 6
	barload_status.value = 'loading'

	find_end_text.value = '🔍搜索中.......'
	if (typeof searchValue == 'string') {
		findValue.value = searchValue
		search_by_tag_id_name(searchValue).then((res) => {
			if (res.data.length == 0) {
				find_end_text.value = '暂无记录和 ' + searchValue + ' 相关记录'
				is_show_load.value = false
			} else {
				find_end_text.value = `找到 ${res.data.length} 条和 ${searchValue} 相关记录`
				arr_find_data.value = res.data
				is_show_load.value = true
			}
		})
	}
}

// 点击取消
const handleCancel = function () {
	arr_find_data.value = []
	find_end_text.value = ''
	is_show_load.value = false
}

function shuffleArray(array) {
	for (let i = array.length - 1; i > 0; i--) {
		// 生成一个随机索引
		const j = Math.floor(Math.random() * (i + 1))
		// 交换元素
		;[array[i], array[j]] = [array[j], array[i]]
	}
	return array
}
// 点击更新推荐
const handleRecommend = function () {
	shuffleArray(recommendList)
}

const fullScreenPreviewImage = function (id, index) {
	let arg = '?id=' + id
	arg += '&index=' + index
	arg += '&total=' + '-'
	arg += '&is_small=' + 'no'

	uni.navigateTo({
		url: '/pages/fullScreenPreviewImage/fullScreenPreviewImage' + arg
	})
}
</script>

<style lang="scss" scoped>
.box-search {
	.box-find-bar {
		// height: 100vh;
	}
	.box-find-content {
		width: 100%;
		min-height: 30vh;
		background-color: white;
		.box-grid {
			margin: 0 $my-margin-rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 10rpx;
			.image {
				border-radius: 10px;
				width: 100%;
				height: 700rpx;
			}
		}
	}
}
</style>
